<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/vue.js"></script>

</head>
<body>

    <div id="app">
        <div v-html="content"></div>
    </div>

    <div id="app2">
        <div v-text="content"></div>
    </div>





    <script>

        /**
         * v-text
            更新元素的 textContent, 可替代{{}}
         *
         * v-html
            更新元素的 innerHTML
            不使用这个指令,插入的html结构不作为模板编译,作为文本显示不要插入不安全的html结构
         *
         */

        //用v-html指令插值
        var message = 'hello,miaov';
        new Vue({
            el: '#app',
            data:{
                msg:'hello vue!',
               // content:'<h1>'+message+'</h1>'
                content:`<div>hello, 我很友善</div><img src="./a.jpg" onerror="console.log('我是黑魔法')"/>`
            }
        })

        new Vue({
            el: '#app2',
            data:{
                msg:'hello vue!',
                content:'<h1>'+message+'</h1>'
            }
        })

    </script>


</body>
</html>